<!--  -->
<template>
  <div ref="waves"></div>
</template>

<script>
export default {
  props: ["color", "boxHeight", "dsize"],
  data() {
    return {
      SEPARATION: 70,
      AMOUNTX: 60,
      AMOUNTY: 25,
      camera: "",
      scene: "",
      renderer: "",

      particles: "",
      particle: "",
      count: 0,

      mouseX: 0,
      mouseY: -250,

      windowHalfX: window.innerWidth / 2,
      windowHalfY: this.boxHeight / 2
    };
  },

  components: {},

  computed: {},

  mounted() {
    setTimeout(() => {
      this.init();
      this.animate();
    }, 100);
  },

  methods: {
    init() {
      const container = this.$refs.waves;

      this.camera = new THREE.PerspectiveCamera(
        30,
        window.innerWidth / this.boxHeight,
        1,
        10000
      );
      this.camera.position.z = 1000;

      this.scene = new THREE.Scene();

      this.particles = new Array();

      const PI2 = Math.PI * 2;
      const radius = this.dsize || 2;
      const material = new THREE.ParticleCanvasMaterial({
        color: this.color,
        program: function(context) {
          context.beginPath();
          context.arc(0, 0, radius, 0, PI2, true);
          context.fill();
        }
      });

      let i = 0;

      for (let ix = 0; ix < this.AMOUNTX; ix++) {
        for (let iy = 0; iy < this.AMOUNTY; iy++) {
          this.particle = this.particles[i++] = new THREE.Particle(material);
          this.particle.position.x =
            ix * this.SEPARATION - (this.AMOUNTX * this.SEPARATION) / 2;
          this.particle.position.z =
            iy * this.SEPARATION - (this.AMOUNTY * this.SEPARATION) / 2;
          this.scene.add(this.particle);
        }
      }

      this.renderer = new THREE.CanvasRenderer();
      this.renderer.setSize(window.innerWidth, this.boxHeight);
      container.appendChild(this.renderer.domElement);
      //

      window.addEventListener("resize", this.onWindowResize, false);
    },
    onWindowResize() {
      this.windowHalfX = window.innerWidth / 2;
      this.windowHalfY = this.boxHeight / 2;

      this.camera.aspect = window.innerWidth / this.boxHeight;
      this.camera.updateProjectionMatrix();

      this.renderer.setSize(window.innerWidth, this.boxHeight);
    },
    animate() {
      requestAnimationFrame(this.animate);

      this.render();
    },
    render() {
      this.camera.position.x += (this.mouseX - this.camera.position.x) * 0.05;
      this.camera.position.y += (-this.mouseY - this.camera.position.y) * 0.05;
      this.camera.lookAt(this.scene.position);

      let i = 0;

      for (let ix = 0; ix < this.AMOUNTX; ix++) {
        for (let iy = 0; iy < this.AMOUNTY; iy++) {
          this.particle = this.particles[i++];
          this.particle.position.y =
            Math.sin((ix + this.count) * 0.3) * 50 +
            Math.sin((iy + this.count) * 0.5) * 50;
          this.particle.scale.x = this.particle.scale.y =
            (Math.sin((ix + this.count) * 0.3) + 1) * 2 +
            (Math.sin((iy + this.count) * 0.5) + 1) * 2;
        }
      }
      this.renderer.render(this.scene, this.camera);

      this.count += 0.1;
    }
  }
};
</script>